<script setup lang="ts">
import {computed, defineProps, onMounted, watch} from "vue"
import {getFileSize, getFileRemainingDays} from "@/utils/textUtils";
import SvgIcon from "@/components/svg-icon/index.vue";
import {ref} from "vue";

//获取组件传递的事件
const emits = defineEmits(["onclick", "check"])

//获取父组件传递的文件树
const props = defineProps(["list", "isDustbin"])
let list = ref([])

watch(() => props.list, (value) => {
  list.value = value
})

//监听多选框
// const handleCheckedCitiesChange = (val: any) => {
//   checkAll.value = list.value.every((item: any) => {
//     return item.ischeck
//   })
// }

// 监听多选框
const handleCheckedCitiesChange = (val: any) => {
  emits('check', val)
}

//计算文件大小
list.value.forEach((item: any) => {
  //计算剩余天数
  if (props.isDustbin) {
    item.createTime = getFileRemainingDays(item.createTime)
  }
  if (item.size) {
    item.size = getFileSize(item.size);
  } else {
    item.size = "---"
  }
})

const size = computed(() => (s: any) => {
  if (!s) return "---"
  return getFileSize(s)
})

//获取所有可拖拽元素
const draggable = ref<any>([])

onMounted(() => {
  //注册拖拽事件
  draggable.value.forEach((item: any) => {
    //拖拽开始
    item.addEventListener("dragstart", (e: any) => {
      const draggedElement = e.target; // 获取被拖拽的元素
      if (!draggedElement.classList.contains("file-tree-list-item")) {
        e.preventDefault()
        return
      }
      e.dataTransfer.setData("fromId", draggedElement.attributes["item-id"].value) //向被放置节点传递数据
    })
    //拖拽中
    item.addEventListener("dragover", (e: any) => {
      const type = e.dataTransfer.types
      if (type && type.includes('fromid')) {
        e.preventDefault()
      }
    })
    //拖拽进入目标元素时（只触发一次）
    item.addEventListener("dragenter", (e: any) => {

    })
    //拖拽离开目标元素时（只触发一次）
    item.addEventListener("dragleave", (e: any) => {

    })
    //拖拽结束
    item.addEventListener("drop", (e: any) => {
      const draggedElement = e.target.parentNode; // 获取被放置拖拽元素的元素
      const fromId = e.dataTransfer.getData("fromId") //从上下文获取被拖拽的元素id
      const toId = draggedElement.attributes["item-id"].value //获取被放置拖拽元素的元素id
      if (fromId === toId) {
        // 拖动到自身直接返回
        return;
      }
      e.preventDefault()
      //TODO 拖动文件更改文件位置
      console.log(fromId, toId)
    })
  })
})

//点击文件
const onclick = (item: any) => {
  emits("onclick", item)
}

</script>

<template>
  <div class="file-tree-list">
    <div class="tab_title">
      <slot name="header"></slot>
    </div>
    <div v-if="list.length>0" class="tab_content overflowY">
      <table style="table-layout: fixed;" class="table">
        <colgroup>
          <col width="5%">
          <col width="40%">
          <col width="15%">
          <col v-if="!props.isDustbin" width="20%">
          <col width="20%">
        </colgroup>
        <tbody style="width: 100%">
        <tr ref="draggable" draggable="true" class="file-tree-list-item" v-for="item in list"
            :key="item.id"
            :item-id="item.id">
          <td>
            <el-checkbox v-model="item.ischeck" @change="handleCheckedCitiesChange(item)"></el-checkbox>
          </td>
          <td @click="onclick(item)" class="file-name" :title="item.name">
            <div>
              <el-image v-if="item.type == 'video' || item.type == 'image'" class="icon" :src="item.thumbnailPath">
                <template #error>
                  <svg-icon class="icon" :name="item.type"/>
                </template>
              </el-image>


              <svg-icon v-else class="icon" :name="item.type"/>
            </div>
            <div style="display: flex;align-items: center;max-width: 100%">
              <div class="name">
                {{ item.name }}
              </div>
              <el-tag v-if="item.status == '1'" type="warning">文件转码中</el-tag>
              <el-tag v-if="item.status == '2'" type="danger">文件转码失败</el-tag>
            </div>
          </td>
          <td>
            <div class="more-box">
              <slot :menu="item"></slot>
            </div>
          </td>
          <td  v-if="!props.isDustbin" >
            {{ item.createTime }}
          </td>
          <td>
            {{ size(item.size) }}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div style="display: flex;align-items: center;flex-direction: column" v-else>
      <svg-icon name="file_no" style="width: 500px;height: 400px"></svg-icon>
      <p>还未上传过文件</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.file-tree-list {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;

  .table {
    width: 100%;
  }

  tr {
    border-bottom: 1px solid #ccc;

  }

  tr:hover {
    cursor: pointer;
  }

  td, th {
    padding: 15px;
  }

  .file-tree-list-item:hover .more-box {
    display: revert;
  }

  .tab_title {
    //height: $file-tree-title-height;
    //background-color: #409EFF;
  }

  .tab_content {
    height: auto;
    max-height: 620px;
  }


  .file-tree-list-item {
    text-align: center;

    .file-name {
      display: flex;
      align-items: center;

      .name {
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 10px;
      }

    }

    .icon {
      width: 30px;
      height: 30px;
      margin-right: 15px;
    }


    .more-box {
      display: none;
    }

  }

  .file-tree-list-item:hover {
    background-color: #FAFAFA;
  }

}
</style>